<template>
    <div v-show='this.show' class="tips-frame layui-layer layui-layer-dialog layui-layer-border
    layui-layer-msg layui-layer-hui"

         id="layui-layer10" type="dialog"
         times="10" showtime="3000" contype="string"
         style="z-index: 19891024; top: 296px; left: 50%; margin-left:-53px">

        <div id="" class="message layui-layer-content">{{message}}</div>

        <span class="layui-layer-setwin"></span>
    </div>
</template>

<script>
    export default {
        // props:['message', 'show'],
        data:function(){

            return {

                message:'',
                show:0
            }

        },

        methods:{

            close:function(){

            },

            fade_out:function(){

                var t = this;
                setTimeout(function(){

                    $('.layui-layer-dialog ').fadeOut('slow', function(){

                        t.show = 0;

                    });

                },1500);


            },

            start :function( data ){

                this.show = data.show;
                this.message = data.message;
            }


        },

        watch:{

            show:function( a, b ){

                if( this.show ){

                    this.fade_out();
                }


            }
        },

        created:function(){


            var t = this;
            this.bus.$on( 'tips',function( data ){

                t.start( data );

            } );

        }

    }
</script>

<style scoped>

    .layui-layer-dialog.fade-out{

    }
    .tips-frame{
        width:100%;
        margin-left:0!important;
        left:0!important;
        background-color: unset;
        text-align: center;
    }
    .tips-frame .message{
        background-color: rgba(0,0,0,0.6);
        display: inline-block;
    }

</style>